<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="小区名称">
                <el-input v-model="formInline.name" placeholder="请输入小区名称" clearable />
            </el-form-item>
            <el-form-item label="经纪人">
                <el-select v-model="formInline.person" placeholder="请选择经纪人" clearable style="width: 200px;">
                    <el-option label="李四" value="李四" />
                    <el-option label="李兰" value="李兰" />
                    <el-option label="黄明" value="黄明" />
                    <el-option label="昭武" value="昭武" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-button plain @click="handleDialog('新增')">
            新增
        </el-button>
        <el-table :data="list" height="650" style="width: 100%">
            <el-table-column prop="id" label="id" width="180" />
            <el-table-column prop="name" label="小区名称" width="180" />
            <el-table-column prop="title" label="描述" />
            <el-table-column prop="level" label="装修" />
            <el-table-column prop="person" label="经纪人" />
            <el-table-column prop="size" label="大小" />
            <el-table-column prop="sizeRoom" label="几居室" />
            <el-table-column prop="url" label="图片">
                <template #default="{ row }">
                    <!-- <el-image :src="row.url" lazy /> -->
                    <el-image style="width: 100px; height: 100px" :src="row.url" :zoom-rate="1.2" :max-scale="7"
                        :min-scale="0.2" :preview-src-list="[row.url]" :initial-index="4" fit="cover" />

                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button type="primary" link @click="handleDialog('编辑', row)">编辑</el-button>
                    <el-button type="danger" link @click="open(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="pageCode" />

        <!-- 弹框 -->
        <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
            <el-form :model="form" :rules="rules">
                <el-form-item label="小区名称" prop="name" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="小区的描述" prop="title" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="房屋大小" prop="size" :label-width="formLabelWidth">
                    <el-input v-model="form.size" autocomplete="off" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="房屋价格" prop="price" :label-width="formLabelWidth">
                    <el-input v-model="form.price" autocomplete="off" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="房屋图片" :label-width="formLabelWidth">
                    <el-input v-model="form.url" autocomplete="off" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="经纪人" :label-width="formLabelWidth">
                    <el-select v-model="form.person" placeholder="请选择">
                        <el-option label="李兰" value="李兰" />
                        <el-option label="黄明" value="黄明" />
                        <el-option label="昭武" value="昭武" />
                        <el-option label="李四" value="李四" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否出售" :label-width="formLabelWidth">
                    <el-select v-model="form.state" placeholder="请选择">
                        <el-option label="已出售" value="1" />
                        <el-option label="未出售" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="装修" :label-width="formLabelWidth">
                    <el-select v-model="form.level" placeholder="请选择">
                        <el-option label="毛坯" value="毛坯" />
                        <el-option label="简装" value="简装" />
                        <el-option label="精装" value="精装" />
                    </el-select>
                </el-form-item>
                <el-form-item label="几居室" :label-width="formLabelWidth">
                    <el-select v-model="form.sizeRoom" placeholder="请选择">
                        <el-option label="一居" value="一居" />
                        <el-option label="两居" value="两居" />
                        <el-option label="三居" value="三居" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleok">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>

import request from '@/untils/request';
import { ref, watch, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'

const list = ref([])
const pageCode = ref(1)
const total = ref(0)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = ref({
    name: '',
    title: '',
    size: '',
    price: '',
    person: '',
    state: '',
    sizeRoom: '',
    level: '',
    url: '',
})

const formInline = reactive({
    name: '',
    person: '',
})

// 删除确认框
const open = (row) => {
    ElMessageBox.confirm(
        '你确定删除吗',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            request.delete('/room/list', { params: { id: row.id } }).then(res => {
                console.log(res);
                if (res.status === 200 && res.data.code === 10000) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    // 重新请求列表数据
                    getData()
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}

// 展开弹框
const handleDialog = (val, row) => {
    dialogFormVisible.value = true
    // 如果是编辑就回填数据
    if (val === '编辑') {
        form.value = { ...row }
    } else {
        // 新增时表单数据都为空
        form.value = {}
    }
}

const rules = reactive({
    name: [
        { required: true, message: '请输入小区名称', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    price: [
        { required: true, message: '请输入价格', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    title: [
        { required: true, message: '请输入小区描述', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    size: [
        { required: true, message: '请输入房屋大小', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
})

// 新增数据
const handleok = () => {
    // 通过id进行判断是新增还是编辑
    if (form.value.id) {
        request.post('/room/list', form.value).then(res => {
            if (res.status === 200) {
                // 关闭弹框
                dialogFormVisible.value = false
                // 重新请求数据
                getData()
                // 数据编辑成功提示
                ElMessage({
                    message: '编辑成功',
                    type: 'success',
                })
            }
        })
    } else {
        request.put('/room/list', form.value).then(res => {
            if (res.status === 200) {
                // 关闭弹框
                dialogFormVisible.value = false
                // 重新请求数据
                getData()
                // 数据新增成功提示
                ElMessage({
                    message: '新增成功',
                    type: 'success',
                })
            }
        })
    }
}

// 获取数据
const getData = () => {
    request.get('/room/list', { params: { pageCode: pageCode.value, ...formInline } }).then(res => {
        console.log(res);
        list.value = res.data.data.list
        total.value = res.data.data.total
    })
}

getData()

watch(pageCode, () => {
    getData()
})

</script>